<template>
  <div v-if="currentApp" class="grid-box full">
    <el-input v-model="keyword" placeholder="请输入关键字" clearable>
      <template #append>
        <ElPopover>
          <template #reference>
            <ElButton>选择【{{ showTypes.length }}】</ElButton>
          </template>
          <TreeFilter v-model="showTypes" />
        </ElPopover>
      </template>
    </el-input>
    <ElScrollbar>
      <el-tree v-if="treeData" ref="treeRef"
        :data="treeData"
        node-key="id"
        :filter-node-method="filterNodeMethod"
        empty-text="无数据"
        default-expand-all
        draggable
        highlight-current
        :expand-on-click-node="false"
        @node-click="onNodeClick"
      >
        <template #default="{ node, data }">
          <el-dropdown v-if="['seed', 'action', 'seed-action'].includes(data.type)" trigger="contextmenu" class="w-[calc(100%-34px)] selected">
            <div class="flex items-center gap2px">
              <Icon :icon="data.icon" :color="data.color"/>
              <span :style="{color: data.color}">{{ node.label }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(item, i) in getCreators(data.type, data)" :key="i" @click="item.onClick">
                  <div class="flex items-center gap2px">
                    <Icon :icon="item.icon" :color="item.color" />
                    <span :style="{color: item.color}">{{ item.label }}</span>
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div v-else class="flex items-center gap2px" @contextmenu.prevent>
            <Icon :icon="data.icon" :color="data.color" />
            <span :style="{color: data.color}">{{ node.label }}</span>
          </div>
        </template>
      </el-tree>
    </ElScrollbar>
  </div>
</template>
<script setup lang="ts">
  import { computed, ref, watch } from 'vue';
  import { ElInput, ElTree, ElDropdown, ElDropdownItem, ElDropdownMenu, ElPopover, ElButton, ElScrollbar } from 'element-plus';
  import { Icon } from '@/components/Icon';
  import { currentApp, currentMicro, treeRef, toTreeData, TreeNode, setBreadcrumbs, getCreators } from '@/views/seed-dev';
  import type Node from 'element-plus/es/components/tree/src/model/node'
  import TreeFilter from './TreeFilter.vue';
  
  const keyword = ref('')
  const showTypes = ref(getShowTypes())
  function getShowTypeKey() {
    if(!currentApp.value) return ''
    
    const { owner, name } = currentApp.value
    return `${owner ? owner + '.' : ''}${name}.showTypes`
  }

  function getShowTypes() {
    const ret = localStorage?.getItem(getShowTypeKey())
    return ret ? JSON.parse(ret) : ['action', 'home', 'seed', 'seed-action']
  }

  watch(currentApp, () => showTypes.value = getShowTypes())

  const filterNodeMethod = (value: string, data) => {
    if(value) {
      return (data.label?.includes(value) || data.value?.includes(value)) && showTypes.value.includes(data.type)
    } else {
      return showTypes.value.includes(data.type)
    }
  }
  watch([keyword, showTypes, treeRef], () => treeRef.value?.filter(keyword.value))
  watch(showTypes, (val) => localStorage?.setItem(getShowTypeKey(), JSON.stringify(val || [])))

  function onNodeClick(data: TreeNode, node: Node) {
    setBreadcrumbs(data.type, node, true)
  }

  const treeData = computed(() => {
    const app = currentApp.value
    if(!app) return []

    return toTreeData(currentMicro.value ? currentApp.value.micros[currentMicro.value] : currentApp.value)
  })
</script>
<style lang="less" scoped>
  .grid-box {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 30px minmax(0, 1fr);
  }
  :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
    background-color: aquamarine;
  }
</style>